import React, { Component, Fragment } from 'react';
import {
	EditOutlined,
	DownloadOutlined,
	RotateRightOutlined,
	CopyOutlined,
	LinkOutlined,
	TeamOutlined,
	DeleteOutlined,
	UndoOutlined,
	BranchesOutlined,
	FileSearchOutlined,
	FormOutlined
} from '@ant-design/icons';
import './index.less';

class ContextMenu extends Component {
	
	state = {
		visible: false
	}
	
	componentDidMount() {
		document.addEventListener('contextmenu', this._handleContextMenu);
		document.addEventListener('click', this._handleClick);
		document.addEventListener('scroll', this._handleScroll,true);
	};

    componentWillUnmount() {
	   document.removeEventListener('contextmenu', this._handleContextMenu);
	   document.removeEventListener('click', this._handleClick);
	   document.removeEventListener('scroll', this._handleScroll,true);
    }
	
	_handleClick = (event) => {
		const { visible } = this.state;
		const isOutside = !(event.target.contains === this.root);
		if(isOutside && visible){
			this.setState({
				visible: false
			});
		}
	}
	
	_handleScroll = () => {
		const { visible } = this.state;
		if(visible){
			this.setState({
				visible: false
			});
		}
	}
	
	_handleContextMenu = (event) => {
		event.preventDefault();
		//只有右击文件列表才弹出右键菜单
		// if(event.target.nodeName === "use") return;//如果在图标icon上右击会报错，加这句解决
		if(event.target.nodeName === "use" || event.target.nodeName === "svg"){
			this.setState({visible: true});
			const clickX = window.event.clientX;//右键时鼠标指针坐标
			const clickY = window.event.clientY;
			const screenW = window.innerWidth;//文档显示区的宽度
			const screenH = window.innerHeight;
			const rootW = this.root.offsetWidth;//右键菜单本身元素的宽度
			const rootH = this.root.offsetHeight;
			//right为true，表示鼠标点击的位置到浏览器的右边界的宽度可以放contextMenu菜单
			//否则，contextMenu菜单放到左边，top和bottom，同理
			const right = (screenW - clickX) > rootW;
			const left = !right;
			const top = (screenH - clickY) > rootH;
			const bottom = !top;
			if(right){
				this.root.style.left = `${clickX + 15}px`;
			}
			if(left){
				this.root.style.left = `${clickX - rootW -15}px`;
			}
			if(top){
				this.root.style.top = `${clickY + 15}px`;
			}
			if(bottom){
				this.root.style.top = `${clickY - rootH - 15}px`;
			}
			return;
		}
		const isOutside = (event.target.className.split(" ")[0] === "act");
		if(!isOutside){
			this.setState({visible: false});
		}else{
			this.setState({visible: true});
			const clickX = window.event.clientX;//右键时鼠标指针坐标
			const clickY = window.event.clientY;
			const screenW = window.innerWidth;//文档显示区的宽度
			const screenH = window.innerHeight;
			const rootW = this.root.offsetWidth;//右键菜单本身元素的宽度
			const rootH = this.root.offsetHeight;
			//right为true，表示鼠标点击的位置到浏览器的右边界的宽度可以放contextMenu菜单
			//否则，contextMenu菜单放到左边，top和bottom，同理
			const right = (screenW - clickX) > rootW;
			const left = !right;
			const top = (screenH - clickY) > rootH;
			const bottom = !top;
			if(right){
				this.root.style.left = `${clickX + 15}px`;
			}
			if(left){
				this.root.style.left = `${clickX - rootW -15}px`;
			}
			if(top){
				this.root.style.top = `${clickY + 15}px`;
			}
			if(bottom){
				this.root.style.top = `${clickY - rootH - 15}px`;
			}
		}
	}
	
	render(){
		const { visible } = this.state;
		const { contextMenuType, contextMenu, isonlyoffice } = this.props;
		const isonly = (isonlyoffice && isonlyoffice.filetype === 1);
		return <Fragment>
				{ visible ?
					<div ref={ref=>{this.root = ref}} className="context-menu">
						{contextMenuType === "whole"?
							<ul>
								<li onClick={()=>contextMenu("rename")}><EditOutlined />&nbsp;&nbsp;重命名</li>
								<li onClick={()=>contextMenu("download")}><DownloadOutlined />&nbsp;&nbsp;下载</li>
								<li onClick={()=>contextMenu("move")}><RotateRightOutlined />&nbsp;&nbsp;移动</li>
								<li onClick={()=>contextMenu("copy")}><CopyOutlined />&nbsp;&nbsp;复制</li>
								{isonly?
									<li onClick={()=>contextMenu("onlyofficeOnlineEdit")}><FormOutlined />&nbsp;&nbsp;在线编辑</li>:null
								}
								<li onClick={()=>contextMenu("viewdetail")}><FileSearchOutlined />&nbsp;&nbsp;查看详情</li>
								<li onClick={()=>contextMenu("sharepeople")}><BranchesOutlined />&nbsp;&nbsp;分享给人</li>
								<li onClick={()=>contextMenu("share")}><LinkOutlined />&nbsp;&nbsp;分享链接</li>
								<li onClick={()=>contextMenu("sharegroup")}><TeamOutlined />&nbsp;&nbsp;加入共享群</li>
								<li onClick={()=>contextMenu("delete")}><DeleteOutlined />&nbsp;&nbsp;删除</li>
							</ul>
							: contextMenuType === "recycle" ?
							<ul>
								<li onClick={()=>contextMenu("reduction")}><UndoOutlined />&nbsp;&nbsp;还原</li>
								<li onClick={()=>contextMenu("deleteCompletely")}><DeleteOutlined />&nbsp;&nbsp;永久删除</li>
							</ul>
							: contextMenuType === "sharegroup" ?
							<ul>
								<li onClick={()=>contextMenu("addUser")}>邀请用户进群</li>
								<li onClick={()=>contextMenu("deleteUser")}>踢人出群</li>
								<li onClick={()=>contextMenu("handover")}>移交群主</li>
								<li onClick={()=>contextMenu("quitGroup")}>退群</li>
							</ul>
							: contextMenuType === "sharegrouplist" ?
							<ul>
								<li onClick={()=>contextMenu("rename")}>重命名</li>
								<li onClick={()=>contextMenu("sharegroupdownload")}>下载</li>
								<li onClick={()=>contextMenu("sharegroupsave")}>保存到网盘</li>
								<li onClick={()=>contextMenu("sharegroupdelete")}>删除</li>
							</ul>
							: contextMenuType === "cacelAndDelete" ?
							<ul>
								<li onClick={()=>contextMenu("cancelshare")}>取消分享</li>
								<li onClick={()=>contextMenu("deleteshare")}>删除文件</li>
							</ul>
							: contextMenuType === "onlyDelete" ?
							<ul>
								<li onClick={()=>contextMenu("deleteshare")}>删除文件</li>
							</ul>
							: contextMenuType === "waitfile" ?
							<ul>
								<li onClick={()=>contextMenu("receiveshare")}>接收文件</li>
								<li onClick={()=>contextMenu("cancelshare")}>取消分享</li>
								<li onClick={()=>contextMenu("deleteshare")}>删除文件</li>
							</ul>
							: contextMenuType === "receiveAndCacelAndDelete" ?
							<ul>
								<li onClick={()=>contextMenu("saveshare")}>保存到本地</li>
								<li onClick={()=>contextMenu("cancelshare")}>取消分享</li>
								<li onClick={()=>contextMenu("deleteshare")}>删除文件</li>
							</ul>
							: contextMenuType === "receiveAndDelete" ?
							<ul>
								<li onClick={()=>contextMenu("saveshare")}>保存到本地</li>
								<li onClick={()=>contextMenu("deleteshare")}>删除文件</li>
							</ul>
							:
							<ul>
								<li onClick={()=>contextMenu("rename")}><EditOutlined />&nbsp;&nbsp;重命名</li>
								<li onClick={()=>contextMenu("download")}><DownloadOutlined />&nbsp;&nbsp;下载</li>
								<li onClick={()=>contextMenu("viewdetail")}><FileSearchOutlined />&nbsp;&nbsp;查看详情</li>
								{isonly?
									<li onClick={()=>contextMenu("onlyofficeOnlineEdit")}><FormOutlined />&nbsp;&nbsp;在线编辑</li>:null
								}
								<li onClick={()=>contextMenu("jump")}><RotateRightOutlined />&nbsp;&nbsp;跳转到目录</li>
								<li onClick={()=>contextMenu("sharepeople")}><BranchesOutlined />&nbsp;&nbsp;分享给人</li>
								<li onClick={()=>contextMenu("share")}><LinkOutlined />&nbsp;&nbsp;分享链接</li>
								<li onClick={()=>contextMenu("sharegroup")}><TeamOutlined />&nbsp;&nbsp;加入共享群</li>
								<li onClick={()=>contextMenu("delete")}><DeleteOutlined />&nbsp;&nbsp;删除</li>
							</ul>
						}
					</div>:null
				}
			</Fragment>
	}
}

export default ContextMenu;